<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-01-18 15:09:13
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-01-18 16:02:20
 * @Description:坐席设定弹窗
-->
<template>
  <div>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-position="right"
      label-width="128px"
      size="mini"
    >
      <el-form-item label="坐席设定">
        <el-radio-group v-model="formData.seatType">
          <el-radio :label="1">人工坐席</el-radio>
          <el-radio :label="2" disabled>自动坐席</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="formData.seatType===1">
        <el-form-item label="上下线设置">
          <el-switch
            v-model="formData.onlineStatus"
            active-text="上线"
            active-value="online"
            inactive-text="下线"
            inactive-value="offline"
          />
        </el-form-item>
        <el-form-item label="选择分机号" prop="extensions">
          <el-checkbox-group v-model="formData.extensions">
            <el-checkbox
              v-for="item in extensionList"
              :key="item.phone"
              :label="item.remark"
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="当前上线人">
          <span class="current-online">{{ onlineList }}</span>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="派单设置">
          <el-radio-group v-model="formData.deliveryType" style="display:inline-grid">
            <el-radio :label="1">按排班表排班
              <span style="color:#909399;margin-left:10px">当前值班人:张三</span>
            </el-radio>
            <el-radio
              :label="2"
              style="margin-top:10px;padding-right:10px"
            >选择工程师
              <el-form-item
                prop="engineer"
                label-width="0px"
                style="display:inline-block"
                :required="false"
              >
                <engineer-select
                  v-model="formData.engineer"
                  placeholder="请选择工程师"
                  :disabled="formData.deliveryType===1"
                  style="width:160px;margin-left:5px"
                />
              </el-form-item>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <el-row>
      <el-col class="align-right">
        <pure-button label="提交" @click="onSubmit" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ServiceDeskApi from '../api';
import EngineerSelect from '@/feat/system/user/component/engineerSelect.vue';
import {
  mapGetters,
} from 'vuex';
export default {
  name: 'SeatSettingDialog',
  components: { EngineerSelect, },
  data() {
    return {
      // 分机号列表
      extensionList: [],
      formData: {
        // 坐席设定类型
        seatType: 1,
        // 坐席上下线状态 online上线 offline下线
        onlineStatus: 'online',
        // 派单设置类型 1按排班表排班 2选择工程师
        deliveryType: 1,
        engineer: null,
        // 分机号列表
        extensions: [],
      },
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      onlineList: 'onlineList',
      selfOnlinePhoneList: 'phoneList', }),
    rules: function () {
      return {
        engineer: [
          { required: this.formData.deliveryType === 2, message: '请选择工程师', trigger: 'change', }
        ],
        extensions: [
          { type: 'array', required: true, message: '请选择分机号', trigger: 'change', }
        ],
      };
    },
  },
  async mounted() {
    await this.getPhoneList();
    this.formData.extensions = this.selfOnlinePhoneList;
    this.$nextTick(() => {
      this.$refs['form'].clearValidate();
    });
  },
  methods: {
    // 获取分机列表数据
    async getPhoneList() {
      try {
        const data = await ServiceDeskApi.extensionList();
        this.extensionList = data;
      } catch (error) {
        console.log(error);
      }
    },
    async onSubmit() {
      try {
        await this.$refs.form.validate();
        if (this.formData.onlineStatus === 'online') {
          this.$store.state.ticketServiceDesk.ws.send({ code: 16, data: this.formData.extensions, });
        } else {
          this.$store.state.ticketServiceDesk.ws.send({ code: 16, data: [], });
        }
        this.$emit('done');
      } catch (error) {
        if (error) {
          this.$message({
            type: 'error',
            message: error,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.current-online {
  font-size: 18px;
}
</style>
